<template>
  <div id="login">
    <div class="dis60"></div>
    <div class="login-wrap" v-if="!isLogin">
      <div class="login-form-wrap">
        <h1 class="login-title f26 tc">{{ webTitle }}</h1>
        <div class="dis30"></div>
        <!-- <ul class="login-tab">
          <li class="cur">账户登录</li>
        </ul>
        <div class="dis20"></div>-->
        <el-form :model="loginForm" :rules="loginRules" ref="loginForm" v-if="isShow">
          <el-form-item prop="uname">
            <el-input
              type="text"
              :maxlength="30"
              placeholder="请输入用户名"
              @keyup.enter.native="submitForm"
              v-model="loginForm.uname"
            ></el-input>
          </el-form-item>
          <el-form-item prop="upass">
            <el-input
              type="password"
              @keyup.enter.native="submitForm"
              :maxlength="16"
              placeholder="请输入密码"
              v-model="loginForm.upass"
            ></el-input>
          </el-form-item>
          <el-form-item prop="captcha_val">
            <el-input
              type="text"
              @keyup.enter.native="submitForm"
              :maxlength="16"
              placeholder="请输入验证码"
              v-model="loginForm.captcha_val"
            ></el-input>
            <img :src="captcha_img" @click.stop="getCaptcha" />
            <div class="dis20"></div>
          </el-form-item>

          <el-checkbox v-model="checked">记住密码</el-checkbox>
          <div class="dis15"></div>
          <el-form-item>
            <el-button
              type="primary"
              style="width:100%;"
              @click="submitForm"
              :class="{'disabled': btnDisabled}"
            >立即登录</el-button>
          </el-form-item>
        </el-form>
        <div style="overflow: hidden;font-size: 12px;"></div>
        <div class="dis10"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import cache from "@cache";
import { cacheWeb } from "@cache";
export default {
  name: "login",
  data() {
    return {
      checked: true,
      time_mobile: 0, //倒计时
      time_email: 0,
      timeout: 60,
      isShow: true,
      isShowRegister: false,
      captcha_img: "",
      loginForm: {
        uname: "",
        upass: "",
        captcha_id: "",
        captcha_val: "",
        rember: ""
      },
      loginRules: {
        uname: [{ required: true, message: "未填写账号", trigger: "blur" }],
        upass: [
          { required: true, message: "未填写密码", trigger: "blur" },
          { min: 6, message: "密码不能少于6位", trigger: "blur" }
        ],
        captcha_val: [
          { required: true, message: "未填写验证码", trigger: "blur" },
          { min: 1, message: "验证码不能为空", trigger: "blur" }
        ]
      },
      message: "",
      webTitle: "SNMP管理"
    };
  },
  computed: {
    ...mapGetters(["userinfo", "isLogin"]),
    btnDisabled() {
      return (
        this.loginForm.uname === "" ||
        this.loginForm.upass === "" ||
        this.loginForm.upass.length < 6
      );
    }
  },
  created() {
    if (this.isLogin) {
      this.$router.push({ path: "/home" });
    }
  },
  mounted() {
    if (cache.get("uname")) {
      this.loginForm.uname = cache.get("uname");
    }
    this.getCaptcha();
    // this.getTitle();
  },
  methods: {
    ...mapActions(["signLogIn"]),
    getCaptcha() {
      const self = this;
      this.$api.jget("captcha", {}).then(res => {
        if (res.status == 1) {
          self.captcha_img = res.data.image;
          self.loginForm.captcha_id = res.data.captcha_id;
        }
      });
    },
    submitForm() {
      const self = this; // 记住密码
      if (this.checked) {
        this.loginForm.rember = 1;
      } else {
        this.loginForm.rember = 0;
      }
      this.$refs["loginForm"].validate(valid => {
        if (valid) {
          this.signLogIn(this.loginForm).then(res => {
            if (res.status !== 1) {
              this.$error(res.msg);
              this.getCaptcha();
            } else {
              cache.set("uid", res.data.uid);
              // cache.set('isMaster',true)
              cache.set("uname", this.loginForm.uname);
              this.$success(res.msg);
              this.$router.push({ path: "/snmpManage/collection/target" });
              // this.toJudgeMaster()
              // cache.set("Master", false);
            }
          });

        } else {
          return false;
        }
      });
    },
    // 判断master
    // toJudgeMaster() {
    //   let that = this;
    //   this.$api.get("prometheus.target_list").then(res => {
    //     if (res.status == -99) {
    //       cache.set('isMaster',false)
    //       this.$router.push({ path: "/member/master" });
    //     }else {
    //       cache.set('isMaster',true)
    //       this.$router.push({ path: "/snmpManage/collection/target" });
    //     }
    //   });
    // },
  }
};
</script>
<style lang="scss">
#login {
  height: 100%;
  background-size: cover;
  background-color: #f3f3f3;
}
.login-wrap {
  width: 420px;
  margin: 0px auto;
}
.login-form-wrap {
  background-color: #fff;
  padding: 50px 60px;
  border-radius: 13px;
}
ul.login-tab {
  border-bottom: solid 1px #efefef;
}
ul.login-tab li {
  display: inline-block;
  padding: 0 12px;
  height: 32px;
  line-height: 32px;
}
ul.login-tab li.cur {
  color: #212121;
  font-weight: 700;
  border-bottom: solid 2px #777;
}
</style>
